import { useEffect, useRef, useState } from "react";
import ProForm, { ModalForm } from "@ant-design/pro-form";
import { Button, Image, message } from "antd";
import { fetchList as fetchList1 } from "@/api/book";
import { fetchList as fetchList2 } from "@/api/package";
import { fetchList as fetchList3 } from "@/api/per";
import { fetchList as fetchList5 } from "@/api/teacher";
import { fetchList as fetchList6 } from "@/api/paint";
import { fetchList as fetchList7 } from "@/api/health";
import ProTable from "@ant-design/pro-table";
import {
  filterPackageType,
  teacherTypeOptions,
  typeNumOptions,
  healthTypeOptions,
} from "@/const";

const maps = {
  1: [
    fetchList1,
    [
      {
        title: "书名",
        dataIndex: "title",
        width: 150,
      },
      {
        title: "封面",
        dataIndex: "picture",
        width: 150,
        search: false,
        render: (_, record) => {
          return <Image width={80} height={50} src={record.picture} />;
        },
      },
      {
        title: "作者",
        dataIndex: "author",
        width: 150,
        search: false,
      },
      {
        title: "出版社",
        dataIndex: "publishingHouse",
        width: 150,
        search: false,
      },
    ],
    "title",
  ],
  2: [
    fetchList2,
    [
      {
        title: "类型",
        dataIndex: "type",
        width: 150,
        search: false,
        render: (_, record) => {
          return filterPackageType(record.type);
        },
      },
      {
        title: "名称",
        dataIndex: "name",
        search: false,
      },
      {
        title: "图片",
        width: 150,
        dataIndex: "images",
        search: false,
        render: (_, record) => {
          return <Image width={80} height={50} src={record?.images[0]} />;
        },
      },
    ],
    "name",
  ],
  3: [
    fetchList3,
    [
      {
        title: "主图",
        dataIndex: "picture",
        width: 150,
        search: false,
        render: (_, record) => {
          return <Image width={80} height={50} src={record.picture} />;
        },
      },
      {
        title: "商品名称",
        dataIndex: "name",
        width: 150,
      },
    ],
    "name",
  ],
  4: null,
  5: [
    fetchList5,
    [
      {
        title: "类型",
        dataIndex: "type",
        valueType: "select",
        fieldProps: {
          options: teacherTypeOptions,
        },
      },
      {
        title: "老师照片",
        dataIndex: "img",
        search: false,
        render: (_, record) => {
          return <Image width={80} height={50} src={record.img} />;
        },
      },
      {
        title: "姓名",
        dataIndex: "name",
        search: false,
      },
      {
        title: "手机号码",
        dataIndex: "phone",
        search: false,
      },
    ],
    "name",
  ],
  6: [
    fetchList6,
    [
      {
        title: "类型",
        dataIndex: "type",
        valueType: "select",
        fieldProps: {
          options: typeNumOptions,
          fieldNames: {
            label: "tab",
            value: "key",
          },
        },
      },
      {
        title: "标题",
        dataIndex: "title",
        search: false,
      },
      {
        title: "封面",
        dataIndex: "cover",
        search: false,
        render: (_, record) => {
          return <Image width={80} height={50} src={record.cover} />;
        },
      },
    ],
    "title",
  ],
  7: [
    fetchList7,
    [
      {
        title: "类型",
        dataIndex: "type",
        valueType: "select",
        fieldProps: {
          options: healthTypeOptions,
        },
      },
      {
        title: "名称",
        dataIndex: "name",
        search: false,
      },
      {
        title: "封面",
        dataIndex: "cover",
        search: false,
        render: (_, record) => {
          return <Image width={80} height={50} src={record.cover} />;
        },
      },
    ],
    "name",
  ],
};

export default ({ urlType, value, onChange }) => {
  const actionRef = useRef();
  const [selectedRowKeys, setSelectedRowKeys] = useState(value ? [value] : []);
  const [selectedRows, setSelectedRows] = useState([]);

  useEffect(() => {
    setSelectedRowKeys([]);
    setSelectedRows([]);
    onChange("");
  }, [urlType]);
  return (
    <ModalForm
      width={800}
      title="请选择"
      trigger={
        <div>
          <Button>请选择</Button>
          <span style={{ marginLeft: 20 }}>
            {selectedRows[0]?.[maps[urlType][2]]}
          </span>
        </div>
      }
      layout="horizontal"
      labelCol={{ span: 2 }}
      onFinish={(values) => {
        if (!selectedRows.length) {
          message.error("请选择一条数据");
          return;
        }
        return true;
      }}
      submitter={false}
    >
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        options={false}
        params={{
          urlType,
          onTheShelf: "1",
        }}
        request={maps[urlType][0]}
        columns={maps[urlType][1]}
        rowSelection={{
          type: "radio",
          selectedRowKeys,
          onChange: (newSelectedRowKeys, newSelectedRows) => {
            setSelectedRowKeys(newSelectedRowKeys);
            setSelectedRows(newSelectedRows);
            onChange(newSelectedRowKeys[0]);
          },
          // getCheckboxProps: (record) => ({
          //   disabled: record.status === 2,
          // }),
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
        }}
      />
    </ModalForm>
  );
};
